<template>
  <div
    class="record-item p-1 relative bg-white shadow-md rounded-lg"
  >
    <el-icon
      class="record-close !absolute -top-1 -left-1 text-black !w-5 !h-5 z-10 bg-slate-300 rounded hover:opacity-80 cursor-pointer"
      v-if="editStatus"
      @click="delItem"
    >
      <Close />
    </el-icon>

    <div class="absolute top-0 right-0 flex items-center">
      <span class="text-sm"> {{ activeTab.label }}排名 </span>
      <span
        class="ml-2 bg-red-500 text-white w-8 h-8 flex items-center justify-center rounded-tr-lg"
      >
        {{ getRanking(item) }}
      </span>
    </div>

    <div class="flex items-center">
      <div class="cursor-pointer" @click="handleOpenHistory">
        <LolAvartar :size="40" :iconId="item.iconId" />
      </div>

      <div class="ml-2">
        <div class="font-medium">
          <span class="text-base text-gray-900 cursor-pointer" @click="handleOpenHistory">{{
            item.name
          }}</span>
          <span class="text-xs ml-2 text-gray-400">
            <template v-if="mode === 'mini'">{{ item.onlineInfo?.slice(5, 16) }}</template>
            <template v-else>V{{ item.level }}</template>
          </span>
        </div>
        <div class="flex flex-wrap" v-if="mode === 'mini'">
          <span class="mt-1 text-xs mr-2">胜: {{ item.netVictoryField }}</span>
          <span class="mt-1 text-xs mr-2">总场次: {{ item.totalGames }}</span>
          <div class="flex flex-wrap mt-1 text-xs">
            <div v-if="item.damageMax">
              <i class="mr-1 ml-2 honor16 honor16-hurt2"></i>{{ percentageConversion(item.damageMax, 0) }}
            </div>
            <div v-if="item.defenseMax">
              <i class="mr-1 ml-2 honor16 honor16-hurt"></i>{{ percentageConversion(item.defenseMax, 0) }}
            </div>
            <div v-if="item.killsMax">
              <i class="mr-1 ml-2 honor16 honor16-kill"></i>{{ percentageConversion(item.killsMax, 0) }}
            </div>
            <div v-if="item.assistsMax">
              <i class="mr-1 ml-2 honor16 honor16-attack"></i>{{ percentageConversion(item.assistsMax, 0) }}
            </div>
            <div v-if="item.pentaKills">
              <i class="mr-1 ml-2 honor16 honor16-kill5"></i>{{ percentageConversion(item.pentaKills, 0) }}
            </div>
          </div>
        </div>
        <div v-else class="mt-1 text-xs">在线时间: {{ item.onlineInfo }}</div>
      </div>
    </div>

    <div class="mt-2 text-sm text-gray-500" v-show="['normal', 'detailed'].includes(mode)">
      <!-- <div class="mt-2">最近评分：{{ item.message }}</div> -->
      <div class="flex flex-wrap text-sm text-gray-500 gap-2 mt-2">
        <div v-for="(info, key) in userInfos" :key="key" class="flex items-center">
          <span class="whitespace-nowrap">{{ info.label }}:</span>
          <span class="ml-2 text-blue-400"> {{ info.value }}</span>
        </div>
      </div>

      <template v-if="mode === 'detailed'">
        <div class="flex flex-wrap mt-1 text-sm">
          <div v-if="item.damageMax">
            <i class="mr-1 ml-2 honor16 honor16-hurt2"></i>{{ percentageConversion(item.damageMax) }}
          </div>
          <div v-if="item.defenseMax">
            <i class="mr-1 ml-2 honor16 honor16-hurt"></i>{{ percentageConversion(item.defenseMax) }}
          </div>
          <div v-if="item.killsMax">
            <i class="mr-1 ml-2 honor16 honor16-kill"></i>{{ percentageConversion(item.killsMax) }}
          </div>
          <div v-if="item.assistsMax">
            <i class="mr-1 ml-2 honor16 honor16-attack"></i>{{ percentageConversion(item.assistsMax) }}
          </div>
          <div v-if="item.pentaKills">
            <i class="mr-1 ml-2 honor16 honor16-kill5"></i>{{ percentageConversion(item.pentaKills) }}
          </div>
        </div>
        <div v-for="(firend, key) in item.sortHarmfulFriend" :key="key" class="mt-2">
          <span class="whitespace-nowrap inline-block min-w-24">{{ firend.label }}</span>
          <span class="ml-2 inline-block min-w-10"
            >胜<span class="text-blue-400">{{ firend.netVictoryField }}</span>
          </span>
          <span class="ml-2"
            >场次<span class="text-violet-500">{{
              `${firend.wins}/${firend.totalGames}`
            }}</span></span
          >
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { toRefs, computed } from 'vue'
import { useRouter } from 'vue-router'

import LolAvartar from '@/components/LolAvartar.vue'
import { Close } from '@element-plus/icons-vue'

import { areaMap } from '@/utils/area.js'

const props = defineProps({
  item: Object,
  index: Number,
  oldIndex: Number,
  mode: String,
  activeTab: Object,
  list: Array,
  editStatus: Boolean
})
const emits = defineEmits(['delItem'])

const { item, mode, list, editStatus } = toRefs(props)
const userInfos = computed(() =>
  [
    {
      label: '净胜场',
      value: item.value.wins - item.value.losses,
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '胜率',
      value: item.value.rate + '%',
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: 'KDA',
      value: `${item.value.avgkills} / ${item.value.avgDeaths} / ${item.value.avgAssists}`,
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '有效场次',
      value: item.value.totalGames,
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '神队友',
      value: (() => {
        if (item.value.sortHarmfulFriend?.length) {
          const firend = item.value.sortHarmfulFriend?.[0]
          if (firend.netVictoryField > 0) {
            return `${firend.label} 胜${firend.netVictoryField}`
          } else {
            return '无'
          }
        } else {
          return '无'
        }
      })(),
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '损友',
      value: (() => {
        if (item.value.sortHarmfulFriend?.length) {
          const firend = item.value.sortHarmfulFriend?.[item.value.sortHarmfulFriend.length - 1]
          if (firend.netVictoryField < 0) {
            return `${firend.label} 胜${firend.netVictoryField}`
          } else {
            return '无'
          }
        } else {
          return '无'
        }
      })(),
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '首场时间',
      value: item.value.startTime,
      visible: ['normal', 'detailed'].includes(mode.value)
    },
    {
      label: '所属大区',
      value: areaMap[item.value.areaId].name,
      visible: mode.value === 'detailed'
    },
    {
      label: '战绩隐藏',
      value: item.value.publicInfo,
      visible: mode.value === 'detailed'
    }
  ].filter(item => item.visible)
)
const router = useRouter()

function percentageConversion(val, decimal = 2) {
  return ((val / item.value.totalGames) * 100).toFixed(decimal);
}

function getRanking(item) {
  return list.value?.findIndex(v => v.netVictoryField === item.netVictoryField) + 1
}

function handleOpenHistory() {
  if (!editStatus.value) {
    localStorage.setItem('userHistory', JSON.stringify(item.value))
    router.push('/history')
  }
}


function delItem() {
  emits('delItem', props.oldIndex)
}
</script>

<style lang="scss" scoped>
.message-detail {
  line-height: 32px;

  :deep(img) {
    width: 1rem !important;
  }
}
</style>
